<template>
    <div class="home">
        <ReCollapse className="agvList" width='335px' height="100%" :iconSwitch="false"
            :position="{ top: '20px', left: '10px' }" :key="timer">
            <div class="contation">
                <el-tabs>
                    <el-tab-pane :label='t(`home.vehicleNews`)'>
                        <div v-for="(v, i) in pureMap.scoketData.AgvData" v-show="v.status !== 0"
                            :class="{ 'agvCard': v.status === 2, 'card': true, 'active': cardIndex === i }"
                            :key="v.agvId" @click="cardActive(i)">
                            <ul>
                                <li class="block">{{ t("home.vehicleName") }}:{{ v.name || v.agvName }}</li>
                                <li>{{ t("home.vehicleStatus") }}:
                                    <el-tag :type="agvStatus(v.status)">{{ statusText(v.status) }}</el-tag>
                                </li>
                                <li>{{ t("home.batteryLevel") }}:
                                    <span :style="{ color: !v.connectionStatus ? '#909399' : 'white' }">
                                        {{ v.battery || 0 }}%
                                    </span>
                                </li>
                                <li>{{ t("home.positioning") }}:
                                    <span :style="{ color: !v.connectionStatus ? '#909399' : 'white' }">
                                        {{ v.curStationName || 0 }}
                                    </span>
                                    <span v-if="v.confidence">
                                        ({{ v.confidence }})
                                    </span>
                                </li>
                                <li>
                                    {{ t("home.mode") }}:
                                    <el-tag size="small"
                                        :type="!v.connectionStatus ? 'info' : modelStatus(v.vehicleMode || 0)">
                                        {{ AGVModeFilter(v.vehicleMode || 0) }}
                                    </el-tag>
                                </li>
                                <li :class="{ block: locale === 'en' }">
                                    {{ t("home.navigationStatus") }}:
                                    <span :style="{ color: !v.connectionStatus ? '#909399' : 'white' }">
                                        {{ formatStatus(v.taskStatus || 0) }}
                                    </span>
                                </li>
                                <li :class="{ block: locale === 'en' }">
                                    {{ t("home.connectionStatus") }}:
                                    <el-tag size="small" :type="formatConnectionStatus(v.connectionStatus || 0)">
                                        {{ ConnectionStatusFilter(v.connectionStatus || 0) }}
                                    </el-tag>
                                </li>

                                <li class="block">{{ t("home.alarmMessage") }}:
                                    <!-- <template v-show="v.connectionStatus !== 0"> -->
                                    <el-tooltip effect="dark" :content="v.errorCode" placement="top">
                                        <span style="color:red" v-show="v.connectionStatus !== 0">
                                            {{ v.errorCode }}
                                        </span>
                                    </el-tooltip>
                                    <!-- </template> -->
                                </li>
                                <li class="block">{{ t("home.angleCoordinate") }}:
                                    <span :style="{ color: !v.connectionStatus ? '#909399' : 'white' }">
                                        <span>X:{{ v.x?.toFixed(3) || 0 }}</span>
                                        <span>Y:{{ v.y?.toFixed(3) || 0 }}</span>
                                        <el-tooltip effect="dark" :content="radiansToDegrees(v.angle).toFixed(3)"
                                            placement="top">
                                            <span>
                                                {{ t("home.angle") }}:
                                                {{ v.angle ? radiansToDegrees(v.angle).toFixed(3) : 0 }}
                                            </span>
                                        </el-tooltip>
                                    </span>
                                </li>
                                <li class="block" v-show="v.taskCode !== ''">{{ t("home.currentMission") }}:
                                    <span>{{ v.taskCode }}</span>
                                </li>
                            </ul>
                            <div class="agvsBtn" v-show="cardIndex === i && v.connectionStatus !== 0">
                                <el-button type="primary" :icon="useRenderIcon(Position)" size="small"
                                    v-show="v.connectionStatus === 1" @click="agvOperate(v, '上线')">
                                    {{ t("home.launch") }}
                                </el-button>
                                <el-button type="danger" :icon="useRenderIcon(Position)" size="small"
                                    v-show="v.connectionStatus === 2" @click="agvOperate(v, '下线')">
                                    {{ t("home.offline") }}
                                </el-button>
                                <el-button type="danger" :icon="useRenderIcon(Guide)" size="small"
                                    v-show="v.connectionStatus === 2 && v.taskStatus === 2"
                                    @click="agvOperate(v, '暂停')">
                                    {{ t("home.pauseNavigation") }}
                                </el-button>
                                <el-button type="primary" :icon="useRenderIcon(Guide)" size="small"
                                    v-show="v.connectionStatus === 2 && v.taskStatus === 3"
                                    @click="agvOperate(v, '继续')">
                                    {{ t("home.continueNavigation") }}
                                </el-button>
                                <el-button type="primary" :icon="useRenderIcon(Guide)" size="small"
                                    @click="agvOperate(v, '初始化车辆')">
                                    {{ t("home.initialization") }}
                                </el-button>
                                <el-button type="primary" :icon="useRenderIcon(Coordinate)" size="small"
                                    v-show="v.connectionStatus !== 0" @click="positionAgv(v, '定位')">
                                    {{ t("home.positioning") }}
                                </el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label='t(`home.missionInfo`)'>
                        <div class="card" v-for="v in pureMap.scoketData.JobData" :key="v.jobID"
                            v-show="pureMap.scoketData.JobData.length !== 0">
                            <!-- <div class="card" v-for="v in [{code:'!',jobID:1,agvName:'!',jobType:0,jobTypeName:'a',startLoc:1,endLoc:'AS',statusName:'A',status:1,stage:1,targetName:'a',topping:1}]" :key="v.jobID" > -->
                            <ul>
                                <li class="block">{{ t(`home.missionNumber`) }}:{{ v.code }}</li>
                                <li>{{ t(`home.vehicleName`) }}: {{ v.agvName }}</li>
                                <li>{{ t(`home.missionType`) }}:
                                    <el-tag :type="jobStatus(v.jobType || 0)">{{ v.jobTypeName }}</el-tag>
                                </li>
                                <li v-show="v.jobType === 1" :class="{ block: locale === 'en' }">
                                    {{ t(`home.startLocation`) }}:
                                    <el-tooltip effect="dark" :content="v.startLoc" placement="top">
                                        {{ v.startLoc }}
                                    </el-tooltip>
                                </li>
                                <li v-show="v.jobType === 1" :class="{ block: locale === 'en' }">
                                    {{ t(`home.endLocation`) }}:
                                    <el-tooltip effect="dark" :content="v.endLoc" placement="top">
                                        {{ v.endLoc }}
                                    </el-tooltip>
                                </li>
                                <li>{{ t(`home.missionStatus`) }}:
                                    <el-tag :type="agvTypeStatus(v.status || 0)">{{ v.statusName }}</el-tag>
                                </li>
                                <li v-show="v.jobType === 1">{{ t(`home.missionPhase`) }}:{{ v.stage === 1 ? '取货' : '卸货'
                                    }}</li>
                                <li v-show="v.jobType !== 1">{{ t(`home.targetSite`) }}:{{ v.targetName }}</li>
                                <li v-show="v.trayCode">{{ t(`home.palletCode`) }}:{{ v.trayCode }}</li>
                            </ul>
                            <div class="agvsBtn" style="text-align: right;">
                                <el-button type="primary" size="small" :icon="useRenderIcon(AddFill)"
                                    @click="resend(v)">
                                    {{ t(`home.resendMission`) }}
                                </el-button>
                                <el-button type="success" size="small" :icon="useRenderIcon(AddFill)"
                                    @click="complete(v)">
                                    {{ t(`home.completeMission`) }}
                                </el-button>
                                <el-button type="danger" v-show="v.status === 0 || v.status === 1"
                                    :icon="useRenderIcon(outlineDelete)" size="small" @click="delJob(v)">
                                    {{ t(`home.delete`) }}
                                </el-button>
                            </div>
                            <!-- <div class="agvsBtn" style="text-align: right;" v-show="v.status === 0 || v.status === 1">
                <el-button type="primary" size="small" v-show="v.status === 1" @click="resend(v)">
                  重发任务
                </el-button>
                <el-button type="success" size="small" v-show="v.status === 1" @click="complete(v)">
                  完成任务
                </el-button>
                <el-button type="danger" :icon="useRenderIcon(outlineDelete)" size="small" @click="delJob(v)">
                  删除
                </el-button>
              </div> -->
                        </div>
                        <el-empty :image="noTask" :description="t(`home.thereAreCurrentlyNoTasksAvailable`)"
                            class="noTask" v-show="pureMap.scoketData.JobData?.length == 0" />
                    </el-tab-pane>
                    <el-tab-pane :label='t(`home.logInfo`)'>
                        <div class="mapMsg">
                            <!-- <button @click="logClick">asd</button> -->
                            <mapLog :AgvData="pureMap.scoketData.AgvData" :LogData="pureMap.scoketData.LogData" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </ReCollapse>

        <!-- 右侧框 -->
        <ReCollapse className="agvList" :width="homeTaskbarWidth" height="52%" :iconSwitch="true"
            :position="{ top: '10px', right: '20px' }">
            <template v-slot="{ isContract }">
                <div class="contation right_contation">
                    <el-tabs @tab-click="isContract(true)">
                        <el-tab-pane :label="t(`home.missionOperation`)">
                            <div class="jobBtns">
                                <el-button type="primary" :size="homeTaskbarWidth === '305px' ? 'small' : 'default'"
                                    :icon="useRenderIcon(AddFill)" @click="openDialog('搬运')">
                                    {{ t(`home.carry`) }}
                                </el-button>
                                <el-button type="primary" :size="homeTaskbarWidth === '305px' ? 'small' : 'default'"
                                    :icon="useRenderIcon(AddFill)" @click="agvTask('移动', 0)">
                                    {{ t(`home.move`) }}
                                </el-button>
                                <el-button type="primary" :size="homeTaskbarWidth === '305px' ? 'small' : 'default'"
                                    :icon="useRenderIcon(AddFill)" @click="agvTask('充电', 2)">
                                    {{ t(`home.charge`) }}
                                </el-button>
                                <el-button type="primary" :size="homeTaskbarWidth === '305px' ? 'small' : 'default'"
                                    :icon="useRenderIcon(AddFill)" @click="agvTask('返航', 3)">
                                    {{ t(`home.returnToBase`) }}
                                </el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="t(`home.callDevice`)">
                            <calling :CallData="pureMap.scoketData.CallData" />
                        </el-tab-pane>
                        <el-tab-pane :label="t(`home.siteQuery`)">
                            <mapSearch :mapData="mapData" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>
        </ReCollapse>

        <div class="canvas_bg">
            <!-- 指针坐标 -->
            <div class="mapCorrd">
                <p>x:{{ mouseCorrd.x }},y:{{ mouseCorrd.y }}</p>
            </div>
            <!-- 地图组件 -->
            <div id="canvas" ref="map"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch, h, computed, onUnmounted } from 'vue'
import { initKonvaStage, agvModel, mouseCorrd, stage, localtions, layer, hideCross } from './components/dxfMap'
import { readFile } from './components/readFile'
import { connectWebsocket, websock } from '@/utils/webScoket'
import ReCollapse from './components/ReCollapse'
import { agvList } from '@/utils/api/dispatch/agv'
import { jobDelete } from '@/utils/api/dispatch/job'
import { modelStatus, agvStatus, statusText, agvTypeStatus, AGVModeFilter, formatConnectionStatus, ConnectionStatusFilter, errorStatus, jobStatus } from './components/filters'
import { BorderBox12 } from '@kjgl77/datav-vue3';
import dayjs from "dayjs";
import { useNav } from "@/layout/hooks/useNav";
import { ElMessageBox } from 'element-plus'
import { message } from "@/utils/message";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDept } from "@/views/dispatch/job/utils/hook";
import { useMapStoreHook } from "@/store/modules/map";
import { addDialog } from '@/components/ReDialog';
import agvForm from './agvForm.vue';
import { type FormItemProps } from "./components/types";
import mapLog from './mapLog.vue'
import mapSearch from './mapSearch.vue'
import calling from './calling.vue'
import noTask from '@/assets/images/data.png'
import { GetLocCodeByStaId } from '@/utils/api/BasicManagement/locations'
import { GetByName } from '@/utils/api/dispatch/station'
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
const { locale, translationCh, translationEn } = useTranslationLang();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

// iconify-icons
import AddFill from "@iconify-icons/ri/add-circle-line";
import outlineDelete from '@iconify-icons/ic/outline-delete';
import Coordinate from "@iconify-icons/ep/coordinate";
import Position from "@iconify-icons/ep/position";
import Guide from "@iconify-icons/ep/guide";
import Setting from "@iconify-icons/ep/setting";
import Search from "@iconify-icons/ep/search";

defineOptions({
    name: 'Home'
})

const { homeTaskbarWidth } = useNav()

const pureMap = useMapStoreHook()
const pureSetting = useSettingStoreHook();

let timer = ref(0)

// 将弧度转换为角度
function radiansToDegrees(radians) {
    return radians * (180 / Math.PI);
}

// 车辆动态监控
watch(() => pureMap.scoketData.AgvData, (newValue) => {
    agvModel(newValue)
})

const formRef = ref();
const map = ref(null)
var cardIndex = ref(null)
var mapData = ref([{}])
// var redata = ref({
//   AgvData: [],
//   JobData: [],
//   LogData: {},
//   CrossData: [],
//   CallData: []
// })

// 车辆任务状态
function formatStatus(status) {
    const stateMap = {
        0: t('home.idle'),
        1: t('home.waiting'),
        2: t('home.inNavigation'),
        3: t('home.paused'),
        4: t('home.completed'),
        5: t('home.failure'),
        6: t('home.exit'),
        7: t('home.waitingForTheDoorToOpenClose')
    }
    return stateMap[status]
}

// 车辆列表
const form = reactive({
    pageNumber: 0, // 当前页码
    pageSize: 100, // 每页显示的条数
    sortName: "sort", // 排序字段名
    sortType: 0 // 排序类型，0为升序，1为降序
});
// 调用gvList函数，传入form参数，返回一个Promise对象
agvList(form).then(res => {
    // redata.value.AgvData = res.Content.Results
    // 使用$patch方法更新pureMap中的state.scoketData['AgvData']，将其值设置为res.Content.Results
    pureMap.$patch((state) => {
        state.scoketData['AgvData'] = res.Content.Results
    })
})

// 车辆列表选中
function cardActive(index) {
    cardIndex.value = index
}

// 删除任务
function delJob(val) {
    ElMessageBox.confirm(
        `是否确认删除任务编号为${val.code}的数据项?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        // websock.send(JSON.stringify({ type: '删除', data: val.code }));
        jobDelete({ JobOnlyId: val.code }).then(res => {
            if (res.Code === 0) {
                message(`提交成功`, { type: "success" });
            }
        })
    }).catch(() => { })
}

// 重发任务
function resend(val) {
    ElMessageBox.confirm(
        `是否确认重发任务编号为${val.code}的数据项?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        websock.send(JSON.stringify({ type: '重发任务', data: val.code, agvid: val.agvID ? val.agvID : 0 }));
        message(`提交成功`, { type: "success" });
    }).catch(() => { })
}

// 完成任务
function complete(val) {
    ElMessageBox.confirm(
        `是否确认完成任务编号为${val.code}的数据项?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        websock.send(JSON.stringify({ type: '完成任务', data: val.code, agvid: val.agvID ? val.agvID : 0 }));
        message(`提交成功`, { type: "success" });
    }).catch(() => { })
}

// 车辆scoket操作
function agvOperate(val, type) {
    if (type === '暂停') {
        websock.send(JSON.stringify({ type, agvid: val.agvId }));
        return message(`提交成功`, { type: "success" });
    }
    ElMessageBox.confirm(
        `是否确认执行${type}任务?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        websock.send(JSON.stringify({ type, agvid: val.agvId }));
        message(`提交成功`, { type: "success" });
    }).catch(() => { })
}

// 车辆定位
function positionAgv(v, type) {
    addDialog({
        // 设置标题，使用模板字符串动态生成，其中type为传入的参数
        title: `${type}`,
        // 定义组件的props，用于接收外部传入的数据
        props: {
            formInline: {
                x: null,
                y: null,
                angle: null,
                site: null
            }
        },
        // 设置组件的宽度为35%
        width: "25%",
        // 设置组件是否可拖动，这里设置为true
        draggable: true,
        // 设置是否显示全屏图标，这里设置为true
        fullscreenIcon: true,
        // 设置点击模态框是否关闭，这里设置为false，即点击模态框不会关闭
        closeOnClickModal: false,
        // 定义内容渲染函数，使用Vue的h函数创建agvForm组件，并传入ref引用
        contentRenderer: () => h(agvForm, { ref: formRef } as any),
        // 定义在确认操作之前执行的函数
        beforeSure: (done, obj) => {
            //@ts-ignore
            let { options, title } = obj
            // 获取formRef引用的组件实例
            const FormRef = formRef.value.getRef();
            // 将options.props.formInline转换为FormItemProps类型
            const curData = options.props.formInline as FormItemProps;
            // 调用FormRef的validate方法进行表单验证
            FormRef.validate(valid => {
                // 如果验证通过
                if (valid) {
                    GetByName({ stationName: curData.site }).then(res => {
                        let { x, y, angle } = res.Content as any
                        curData.x = x
                        curData.y = y
                        curData.angle = angle
                        // 表单规则校验通过
                        websock.send(JSON.stringify({ type: title, agvid: v.agvId, data: Object.values(curData).toString() }));
                        message(`${title}成功`, {
                            type: "success"
                        });
                        done()
                    })

                }
            });
        }
    })
}

// const datas = [
//     {
//         "agvId": 4,
//         "agvName": "4",
//         "ip": "192.168.5.102",
//         "status": 1,
//         "vehicleMode": 0,
//         "errorCode": null,
//         "x": 0,
//         "y": 0,
//         "angle": 0,
//         "battery": 0,
//         "connectionStatus": 1,
//         "taskStatus": 0,
//         "taskCode": "",
//         "taskStr": "",
//         "curStationName": "0"
//     }
// ]

onMounted(async () => {
    // 读取文件
    const data = await readFile()
    // 初始化Konva舞台
    initKonvaStage('canvas', map, data, false)
    // 初始化隐藏交管
    hideCross()
    // 将数据赋值给mapData
    mapData.value = data.stations
    // agvModel(pureMap.scoketData.AgvData)
    // 双击
    // stage.on('dblclick', function (e) {
    // const name = e.target.parent?.name().split('-')[0]
    // // console.log('货位=>', e.target.parent);
    // const type = e.target.parent?.attrs.type
    // const staId = e.target.parent?.attrs.stationid
    // if (name === "station" && type === 3) {
    //     GetLocCodeByStaId({ staId }).then(res => {
    //         localtions(e.target.parent.attrs, res.Content)
    //     })
    // }
    // console.log(e.target.parent);
    // });

    // console.log('home', $t(login.pureGetVerifyCode));
})

const {
    openDialog,
    agvTask
} = useDept();

</script>

<style lang="scss" scoped>
// .active {
//   background-color: #67c23a;
// }

.home {
    background-color: #001529;
    margin: 0 !important;
    // height: calc(100vh - 85px);
    height: 100%;
    position: relative;
}

.jobBtns {
    padding-top: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .el-button {
        width: 40%;
        margin-left: 0;
        margin-bottom: 10px;
    }
}

.canvas_bg {
    position: absolute;
    width: calc(77% - 30px);
    height: calc(100% - 40px);
    top: 20px;
    right: 10px;
    background: linear-gradient(90deg, rgba(62, 61, 61, 0.4) 2%, transparent 0%) 0 0, linear-gradient(180deg, transparent 99%, rgba(62, 61, 61, 0.4) 1%) 0 0;
    background-size: 50px 50px;

    #canvas {
        width: 100%;
        height: 100%;
    }
}

.contation::v-deep {
    height: 100%;
    transition: all 0.6s;
    padding: 0 5px;

    .el-tabs {
        height: 100%;
    }

    .el-tabs__nav-wrap {
        &::after {
            background-color: #324d8a !important;
        }
    }

    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-tabs__content {
        height: calc(100% - 40px);
    }

    .el-tabs__item {
        color: white;
        font-family: "KaiTi";
        font-size: 16px;

        &:hover {
            color: var(--el-color-primary) !important;
        }
    }

    .el-tabs__item.is-active {
        color: var(--el-color-primary) !important;
    }

    .el-tab-pane {
        height: 100%;
    }

    .el-tab-pane:nth-child(-n+2) {
        overflow-y: scroll;
        height: 100%;

        &::-webkit-scrollbar {
            width: 2px;
            height: 1px;
        }

        &::-webkit-scrollbar-thumb {
            //滑块部分
            border-radius: 5px;
            background-color: #267f9c;
        }

        &::-webkit-scrollbar-track {
            //轨道部分
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #2862b7;
            border-radius: 5px;
        }
    }
}

.right_contation::v-deep {
    height: calc(100% - 30px);
    transition: all 0.6s;

    .el-tabs {
        position: absolute;
        top: -5px;
        width: calc(100% - 10px);
        box-sizing: border-box;
    }

    // .el-tabs__nav-wrap::after{
    //   left: 20px;
    // }
    .el-tabs__header {
        border-radius: 10px;
        overflow: hidden;
    }

    .el-tab-pane {
        overflow-y: visible !important;
    }

    .el-tabs__item {
        padding: 0 10px !important;
    }
}

.msgCn {
    height: calc(383px - 130px);
    overflow: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar {
        width: 2px;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道
  内阴影+圆角*/
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #001529;
    }

    /*定义滑块
  内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #022e5a;
    }

    ul {
        li {
            color: white;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            padding: 5px 5px;
            border-bottom: 1px dashed #6c6c6c;
            font-family: 'KaiTi';
        }
    }
}

.card {
    padding: 6px 0 6px 0;
    border: 1px dashed #409eff;
    // box-shadow: 0px 0px 5px white;
    border-radius: 3px;

    &:nth-child(n+1) {
        margin-top: 7px;
    }

    ul {
        font-size: 0;

        li {
            display: inline-block;
            width: 50%;
            color: white;
            font-size: 13px;
            font-family: 'KaiTi';
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 7px;
            line-height: 21px;

            span {
                padding: 0;
            }

            &:nth-child(1) {
                text-align: center;
            }
        }
    }

    .btns {
        text-align: center;
        border-top: 1px dashed white;
        padding: 2px 0;

        .el-button {
            &:nth-child(2) {
                margin-left: 60px;
            }
        }
    }
}

.agvList .card:hover {
    cursor: pointer;
    border-style: solid;
}

.active {
    border-style: solid;
}

.agvList,
.task {

    // .contation{
    //   height:calc(100% - 30px);
    //   padding:0 5px;
    //   border-top: 1px solid #409eff;
    // }
    .agvsBtn {
        padding-top: 6px;
        margin-top: 6px;
        // padding-left: 10px;
        text-align: center;
        padding-right: 10px;
        border-top: 1px solid #409eff;

        .el-button {
            padding: 5px 5px;
        }
    }
}

.crossCard {
    padding: 7px 5px !important;
    margin-top: 10px !important;

    li {
        line-height: 25px !important;

        span {
            color: #409eff;
        }

        &:nth-child(1) {
            text-align: left !important;
        }
    }
}

.taskCard {
    li {
        line-height: 28px !important;
    }
}

.noTask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block {
    display: block !important;
    width: 100% !important;

    span {
        &:nth-child(1) {
            padding-left: 0 !important;
        }

        padding-left:10px !important;
    }
}

.inline-block {
    display: inline-block !important;
}

.el-tag {
    background: transparent;
    border: 0;
}

.mapMsg {
    height: 100%;
    color: #e52e00
}

.agvCard {
    animation: glow 1s infinite alternate;
}

@keyframes glow {
    0% {
        border-color: #409eff;
    }

    100% {
        border-color: red;
    }
}
</style>
